import { TranslationOutlined } from "@ant-design/icons";
import { layoutStore } from "../../layoutStore"
import { useNavigate } from 'react-router-dom';
function Header(props) {
    const { isEnglish } = layoutStore;
    return (
        <div className="header">
            <div className="header-page">
                <div className="header-left">
                    <HeaderMenu url="/" name={isEnglish?"Home":"首页"} />
                    <HeaderMenu url="/about" name={isEnglish?"About Us":"关于"} />
                </div>
                <div className="header-mid">
                    {isEnglish ? "Yi Fengyan" : "伊风烟"}
                </div>
                <div className="header-right">
                    <TranslationOutlined style={{ cursor: 'pointer' }} onClick={props.changeLanguage} />
                </div>
            </div>
        </div>
    );
}
function HeaderMenu(props) {
    const navigate = useNavigate();  
  
  function handleClick() {  
    navigate(props.url);
  }  
    return (
        <div onClick={handleClick} className="header-menu-item">
            {props.name}
        </div>
    );
}
export default Header;